<template>
  <div class="input-item">
    <div class="label">{{ props.label }}</div>
    <div class="input">
      <textarea :value="props.modelValue" @input="bindChange" :placeholder="'请输入'+(props.label||'')"/>
      <slot name="next"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  label: String,
  modelValue: String
})
const emit = defineEmits(['update:modelValue'])
const bindChange = (event) => {
  emit('update:modelValue', event.detail.value)
}
</script>

<style scoped lang="scss">
.input-item {
  .label {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 42rpx;
    margin: 0 0 16rpx 0;
    padding: 0 22rpx;
  }
  .input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 380rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 0 38rpx;
    border: 2rpx solid rgba(0,0,0,0.08);
    textarea {
      font-size: 24rpx;
      font-weight: 400;
      color: #0D3333;
    }
  }
}

</style>
